<div class="page-content">
    <div class="row">
        <div class="col-xs-4">
            <a href="#modal-category" role="button" class="btn btn-sm btn-success"
               onclick="$('#submitForm').clearForm();validator.resetForm();"  href="#modal-category" data-toggle="modal">
                <i class="ace-icon fa fa-pencil-square-o bigger-120 "></i>添加直播平台
            </a>
        </div>
        <div class="space-4"></div>
        <div class="col-xs-12">
            <table class="table table-striped table-bordered table-hover">
                <thead>
                <tr>
                    <th>名称</th>
                    <th>网址</th>
                    <th>图标</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody id="user_list">
                #foreach ($item in ${platforms})
                <tr>
                    <td> $item.platformName</td>
                    <td> $item.platformUrl</td>
                    <td> <img style="width:24px; height:24px;" src="$item.platformIcon"/> </td>
                    <td>
                        <div class="action-buttons">
                            <a class="green" href="#" onclick="showEditDialog('$item.platformId')" title="编辑" hideFocus="true">
                            <i class="ace-icon fa fa-pencil bigger-130" hideFocus="true"></i>
                            </a>
                            <a class="red" href="javascrip:void(0)" onclick= "deletePlatform(${item.platformId})" title="移除">
                                <i class="ace-icon fa fa-trash-o bigger-130"></i>
                            </a>
                        </div>
                    </td>
                </tr>
                #end
                </tbody>
            </table>
        </div>
        <!-- /.span -->
    </div>
    <!-- /.row -->
</div>

<div id="modal-category" class="modal fade" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header no-padding">
                <div class="table-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        <span class="white">×</span>
                    </button>
                    直播平台信息
                </div>
            </div>
            <form class="form-horizontal" method="post" role="form" id="submitForm" action="./common/saveplatform" novalidate="novalidate">
                <input type="hidden" name="platformId" id="platformId" value="0">
                <div class="modal-body no-padding">
                    <div class="space-4"></div>
                    <div class="form-group">
                        <label class="col-sm-2 col-xs-12 control-label no-padding-right"> 平台名称 </label>
                        <div class="col-sm-9  col-xs-12 ">
                            <input type="text" id="platformName" name="platformName" placeholder="请输入平台名..." class="col-xs-10">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 col-xs-12 control-label no-padding-right"> 平台地址 </label>
                        <div class="col-sm-9  col-xs-12 ">
                            <input type="text" id="platformUrl" name="platformUrl" placeholder="请输入平台地址..." class="col-xs-10">
                        </div>
                    </div>
                    <div class="space-4"></div>
                    <div class="form-group">
                        <label class="col-sm-2 col-xs-12 control-label no-padding-right"> 平台logo </label>
                        <div class="col-sm-4  col-xs-12 ">
                            <label class="ace-file-input ace-file-multiple">
                                <input type="file" name="iconFile" id="iconFile">
                            </label>
                        </div>
                    </div>
                    <div class="space-4"></div>
                </div>
                <div class="modal-footer no-margin-top text-right">
                    <button class="btn btn-sm btn-success submitBtn" type="submit">
                        <i class="ace-icon fa fa-check"></i>
                        提交
                    </button>
                </div>
            </form>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>

<script>
    var submitLock = false;
    var validator;
    var options = {
        beforeSerialize:function() {
            if($('#iconFile').val() == '') {
                $('#iconFile').remove();
            }
        },
        beforeSubmit: function () {
            if (submitLock) {
                return false;
            }
            info('正在保存，请稍等...');
            submitLock = true;
            return true;
        },
        success: function (data) {
            submitLock = false;
            if (data.resultCode == 0) {
                succ('操作成功');
                $('#modal-category').modal('toggle');
                delay(function () {
                    load('./common/platform');
                }, 1000);
            } else {
                error(data.resultMsg);
            }
        },
        error: function (data) {
            submitLock = false;
            error('系统繁忙，请稍候重试');
        },
        dataType: 'json',
        type: 'POST',
        timeout: 50000
    };
    $(function () {
        validator = $("#submitForm").validate({
            errorElement: "em",
            errorPlacement: function (error, element) {
                element.after(error);
            },
            rules: {
                "platformName": {
                    required: true
                },
            },
            messages: {
                "platformName": {
                    required: '请输入平台名'
                },
            },
            submitHandler: function (form) {
                if (submitLock) {
                    return;
                }
                $(form).ajaxSubmit(options);
            }
        });
    });

    $('#iconFile').ace_file_input({
        style: 'well',
        btn_choose: '选择头像',
        btn_change: null,
        no_icon: 'ace-icon fa fa-picture-o',
        thumbnail: 'large',
        droppable: true,
        allowExt: ['jpg', 'jpeg', 'png', 'gif'],
        allowMime: ['image/jpg', 'image/jpeg', 'image/png', 'image/gif']
    });

    function showEditDialog(Id) {
    validator.resetForm();
        $('#submitForm').clearForm();
        $('#submitForm').find('#platformId').val(Id);
        $.ajax({
                type:"GET",
                url:'./common/queryPlatformById',
                data:{platformId:Id},
                success:function(data) {
                    try {
                        $.each(data, function (i, item) {
                            if (i == 'platformIcon') {
                                $('#iconFile').ace_file_input('show_file_list', [{type: 'image', name: item}]);
                                $('#iconFile').parent().find('img').css({width: '150px', height: '150px'}).show();
                            } else {
                                $('#submitForm').find('#' + i).val(item);
                            }
                        });
                    } catch(E) {

                    }
                },
                dataType:'JSON'});
        $('#modal-category').modal('show');
    }

    function deletePlatform(Id) {
        confirm('确认删除?', function () {
            $.ajax({
                type: "GET",
                url: './common/delplatform',
                data: {platformId: Id},
                success: function (data) {
                    if (data.resultCode == 0) {
                        succ('删除成功！');
                        delay(function () {load(basePath+"/common/platform")}, 1000);
                    } else {
                        error('删除失败！');
                    }
                },
                dataType: 'JSON'
            });
        });
    }
</script>